<template>
  <div>
    <input type="text" v-model="valStr" />
    <div v-show="!flag">提示：{{computeduserName}}</div>
    <div>{{flag}}</div>
    <button @click="text;outLogin">点击</button>
  </div>
</template>

<script>
export default {
  name: "username",
  data() {
    return {
      valStr: "",
      flag: true,
    };
  },
  computed: {
    computeduserName: {
      get: function () {
        if (this.valStr.trim() == "") {
          this.text(1)
          return "请输入内容";
        } else if (this.valStr.length < 6) {
          this.text(1)
          return "最小六位数";
        } else { 
          this.text(2)
          return "完成";
        }
      }
    },
  },
  methods: {
    text(num) {
      if (num == 1) {
        this.flag = false
      } else if (num == 2) {
        this.flag = true
      }
    },
    outLogin() {
      localStorage.removeItem("userlist");
      this.$router.push("/login");
      this.$message({
        type: "success",
        message: "退出成功",
        duration: 500,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.userbox {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .outlogin {
    margin-top: 0.3rem;
  }
}
.userimg {
  width: 0.5rem;
  height: 0.5rem;
}
</style>